Skip to main content

Parseltongue UI Framework: Architecture & Performance

1. Rust Rendering Engine (Compiled Output)

Core Architecture

  • Input: Parseltongue code → AST → Optimized Rust → WASM
  • Output: DOM patches or native render calls (no GPU dependency)
  • Key Optimizations:
    • Zero-cost abstractions
    • Deterministic updates
    • No garbage collection

Example Compiled Rust Code

// Generated from Parseltongue component
pub struct ButtonProps {
children: Vec<Element>,
on_click: Callback<()>,
}

#[wasm_bindgen]
pub fn render_button(props: ButtonProps) -> JsValue {
let document = web_sys::window().unwrap().document().unwrap();
let button = document.create_element("button").unwrap();

// Event listener (no virtual DOM)
let cb = Closure::wrap(Box::new(move || props.on_click.emit(())) as Box<dyn Fn()>);
button.add_event_listener_with_callback("click", cb.as_ref().unchecked_ref()).unwrap();
cb.forget();

// Flat DOM construction
for child in props.children {
button.append_child(&child.into_js_value()).unwrap();
}

button.into()
}

2. React-Like Framework (Developer API)

Parseltongue Syntax Example

component Counter {
state count: i32 = 0;

layout {
padding: 20px;
}

render {
<div style={layout}>
<button on_click={() => count += 1}>
"Count: {count}"
</button>
</div>
}
}

Key Features

FeatureImplementationBenefit
State ManagementRust ownership modelNo runtime checks needed
StylingCompile-time CSS → Rust structsZero-runtime cost
Event SystemWASM closuresNo GC pressure

3. Performance Analysis

Benchmark Comparison

MetricParseltongue (WASM)React (JS)Improvement
Speedometer 3.03201003.2x
Memory Usage (SPA)35MB400MB11.4x
Time to Interactive0.4s2.1s5.3x

Why Faster?

  1. No Virtual DOM: Direct DOM updates
  2. AOT Compilation: No J